<template>
    <h1>管理员列表</h1>
    <el-table :data="adminList" style="width: 100%">
        <el-table-column prop="adminid" label="管理员编号" width="300" />
        <el-table-column prop="adminname" label="姓名" width="180" />
        <el-table-column prop="role" label="角色" width="180" >
            <template #default="scope">
                <span>{{scope.row.role==1?"超级管理员":"普通管理员"}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-popconfirm title="亲，您真的要删除吗?" @confirm="deleteAdmin(scope.row.adminid)">
                    <template #reference>
                        <el-button >删除</el-button>
                    </template>
                </el-popconfirm>
                <el-button @click="editShowFn(scope.row.adminname)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <Edit v-show="isShowEdit" @hide="hideFn" :adminname="editAdminName" @updatesuccess="successFn" ></Edit>

</template>
  
<script setup lang="ts">

import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { reactive,ref } from "vue";
import service from "../../../utils/service";
import Edit from "./Edit.vue";


interface IAdmin {
    "adminname": string,
    "password": string,
    "role": number,//1:表示超级管理员，2：普通管理员
    "adminid": string,
    "checkedKeys":string[]
}

const adminList = reactive<IAdmin[]>([]);

// 1、获取管理员的信息
const getAdminList = ()=>{
    service({
        url:"/admin/list"
    })
    .then(res=>{
        if(res.data.code==="200"){
            adminList.length = 0;
            adminList.push(...res.data.data);
        }
    })
}

getAdminList();

// 2、删除管理员
const deleteAdmin=(adminid:string)=>{
    service({
        url:"/admin/delete",
        method:"post",
        data:{
            adminid
        }
    })
    .then(res=>{
        if(res.data.code==="200"){
            ElMessage({
                message: '删除成功！',
                type: 'success',
            })
            getAdminList();
        }
    })
}

// 3、修改相关：
const isShowEdit = ref(false);//控制修改组件的显示和隐藏
const editAdminName = ref("");//要修改的 管理员姓名

const editShowFn=(adminname:string)=>{
    editAdminName.value = adminname;
    isShowEdit.value=true;
}

const hideFn=()=>{
    isShowEdit.value = false;
}
// 当修改成功后，需要重新发送请求，获取最新数据
const successFn = ()=>getAdminList();

</script>
  
<style scoped>
.img {
    width: 200px;
    height: 150px;
}
</style>